<template>
  <div style="margin-top: 16px">
    <el-form :model="businessRuleTaskForm" label-width="100px" size="small" >
      <el-form-item label="规则类型" prop="type" :rules="{ required: true, trigger: ['blur', 'change'] }">
        <el-select v-model="businessRuleTaskForm.type" @change="changeType">
          <el-option v-for="item in typeList" :key="item.key" :label="item.name" :value="item.key" />
        </el-select>
      </el-form-item>
      <template v-if="businessRuleTaskForm.type === 'normal'">
        <el-form-item label="规则名称">
          <el-input v-model="businessRuleTaskForm.rules" placeholder="定义规则的名称，多个规则用逗号隔开" clearable @input="updateElementTask()" @change="updateElementTask()" />
        </el-form-item>
        <el-form-item label="输入变量">
          <el-input v-model="businessRuleTaskForm.ruleVariablesInput" placeholder="定义业务规则执行需要的变量,多个变量用逗号隔开" clearable @input="updateElementTask()" @change="updateElementTask()" />
        </el-form-item>
        <el-form-item>
          <template slot="label">
              <span>
                 输出变量
                 <el-tooltip placement="top">
                    <template slot="content">
                       <div>
                          规则执行结果变量，变量的值为ruleVariablesInput定义的变量集合。
                       </div>
                    </template>
                    <i class="el-icon-question" />
                 </el-tooltip>
              </span>
          </template>
          <el-input v-model="businessRuleTaskForm.resultVariable" clearable @input="updateElementTask()" @change="updateElementTask()" />
        </el-form-item>
        <el-form-item label="排除规则">
        <!--  用于设置是否排除某些规则。如果设置为true，则忽略flowable:rules指定的规则，执行其他的规则;如果设置为false，则只执行flowable:rules指定的规则;如果设置为fasle的同时flowable:rules值为空，则不执行任何规则-->
          <el-switch v-model="businessRuleTaskForm.exclude" @change="updateElementTask()"/>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="Class">
          <el-input v-model="businessRuleTaskForm.class" placeholder="自定义业务规则实现类" clearable @input="updateElementTask()" @change="updateElementTask()" />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "BusinessRuleTaskPanel",
  props: {
    id: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      typeList: [
        { key: "normal", name: "默认"},
        { key: "class", name: "Class"}
      ],
      defaultTaskForm: {
        rules: "",
        ruleVariablesInput: "",
        resultVariable: "",
        exclude: false,
        class: "",
      },
      businessRuleTaskForm: {
        type: 'normal'
      }
    };
  },
  watch: {
    id: {
      immediate: true,
      handler() {
        this.bpmnElement = this.modelerStore.element;
        this.$nextTick(() => this.resetTaskForm());
      }
    }
  },
  methods: {
    resetTaskForm() {
      for (let key in this.defaultTaskForm) {
        let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
        this.$set(this.businessRuleTaskForm, key, value);
      }
      this.businessRuleTaskForm.type = this.businessRuleTaskForm.class ? "class" : "normal";
      this.deleteElementFormExtensions();
    },

    // 选择规则类型
    changeType(value) {
      this.businessRuleTaskForm.type = value;
      if (this.businessRuleTaskForm.type === 'class') {
        this.businessRuleTaskForm.rules = '';
        this.businessRuleTaskForm.ruleVariablesInput = '';
        this.businessRuleTaskForm.resultVariable = '';
        this.businessRuleTaskForm.exclude = null;

        // 删除与之前类型相关的属性
        delete this.modelerStore.element.businessObject?.rules;
        delete this.modelerStore.element.businessObject?.ruleVariablesInput;
        delete this.modelerStore.element.businessObject?.resultVariable;
        delete this.modelerStore.element.businessObject?.exclude;
      } else {
        this.businessRuleTaskForm.class = '';
        delete this.modelerStore.element.businessObject?.class;
      }
    },

    updateElementTask() {
      let taskAttr = Object.create(null);
      taskAttr.rules = this.businessRuleTaskForm.rules || null;
      taskAttr.ruleVariablesInput = this.businessRuleTaskForm.ruleVariablesInput || null;
      taskAttr.resultVariable = this.businessRuleTaskForm.resultVariable || null;
      taskAttr.exclude = this.businessRuleTaskForm.exclude;
      taskAttr.class = this.businessRuleTaskForm.class;
      this.modelerStore.modeling.updateProperties(this.bpmnElement, taskAttr);
    },

    // 新建节点时,默认是用户节点,会添加表单相关扩展属性,当前任务直接删除掉
    deleteElementFormExtensions() {
      const element = this.modelerStore.element;
      if (element.businessObject?.extensionElements?.values) {
        element.businessObject.extensionElements.values =
          element.businessObject.extensionElements.values.filter(ex => ex.$type !== 'flowable:FormItems');
      }
    }
  },
  beforeDestroy() {
    this.bpmnElement = null;
  }
};
</script>
